<template>
  <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-divider orientation="left"> 表格视图 </a-divider>
    <a-form-model-item label="行高">
      <a-radio-group v-model="option.size" button-style="solid">
        <a-radio-button value="mini"> 紧凑 </a-radio-button>
        <a-radio-button value="small"> 中等 </a-radio-button>
        <a-radio-button value="medium"> 高 </a-radio-button>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="边框">
      <a-radio-group v-model="option.border" button-style="solid">
        <a-radio-button value="default"> 默认 </a-radio-button>
        <a-radio-button value="full"> 完整 </a-radio-button>
        <a-radio-button value="outer"> 外边框 </a-radio-button>
        <a-radio-button value="inner"> 内边框 </a-radio-button>
        <a-radio-button value="none"> 无边框 </a-radio-button>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="选择">
      <a-radio-group v-model="option.select">
        <a-radio value="checkbox"> 多选 </a-radio>
        <a-radio value="null"> 无 </a-radio>
      </a-radio-group>
    </a-form-model-item>
    <a-form-model-item label="读取缓存">
      <a-switch v-model="option.cache" />
    </a-form-model-item>
    <a-form-model-item label="显示设置">
      <a-checkbox v-model="option.seq" :style="blockSyle">
        显示序号
      </a-checkbox>
      <a-checkbox v-model="option.stripe" :style="blockSyle">
        显示交替行颜色
      </a-checkbox>
    </a-form-model-item>

    <a-form-model-item label="自动刷新" extra="每隔一段时间后自动刷新当前视图">
      <a-select v-model="option.refresh" placeholder="请选择自动刷新">
        <a-select-option :value="0">关闭</a-select-option>
        <a-select-option :value="30">30秒</a-select-option>
        <a-select-option :value="60">1分钟</a-select-option>
        <a-select-option :value="120">2分钟</a-select-option>
        <a-select-option :value="180">3分钟</a-select-option>
        <a-select-option :value="240">4分钟</a-select-option>
        <a-select-option :value="300">5分钟</a-select-option>
      </a-select>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      blockSyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },
    };
  },
  props: {
    option: {
      type: Object,
      default: {},
    },
  },
  methods: {},
};
</script>
<style scoped>
.con {
  width: 100%;
  padding: 14px 16px;
  background: rgb(255, 255, 255);
  border-radius: 8px;
  border: 1px solid rgb(234, 234, 234);
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}
.con .btnCon {
  width: 180px;
  margin-right: 34px;
}
.flex {
  flex: 1;
}

.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0;
}
</style>
